<template>
  <div style="width: 100%; height: 600px">
    <div ref="mapContainer" id="chartId" style="width: 100%; height: 600px"></div>
    <button @click="setHigh" style="position: fixed;top: 10px;">点亮</button>
  </div>
</template>

<script>
import * as $echarts from "echarts";
import "echarts-gl";

export default {
  name: "Echarts3DMap",
  data() {
    return {
      cartoonIndex: 0,
      features: [],
      isInit: false,
      mapTimer:null,
      mapColors: [
        "#4eb8da",
        "#62b6cd",
        "#76b4bc",
        "#86b1ad",
        "#98ae9a",
        "#a8a985",
        "#b6a371",
        "#c19e5f",
        "#ce9842",
        "#ce9842",
        "#ce9842",
        "#ce9842",
      ]
    };
  },
  mounted() {
    this.getAreaInfo()
  },
  methods: {
    setHigh() {

    },
    // 根据城市id获取县的区块信息
    getAreaInfo: function (cityName) {
      if (this.isInit) {
        this.chartMap()
        return
      }
      const code = 150000
      // 使用Axios发送GET请求，并动态添加查询参数
      fetch(`https://geo.datav.aliyun.com/areas_v3/bound/${code}_full.json`)
          .then((response) => response.json())
          .then((data) => {
            // 处理API响应数据
            // 注册地图数据
            this.features = []
            $echarts.registerMap('geoJson', data)
            this.features = data.features
            this.chartMap()
            // this.mapBorder()
            // 将响应数据存储到Vue组件的数据中
          })
          .catch(error => {
            // 处理错误
            console.error(error)
          })
    },
    chartMap() {
      var myChart = $echarts.init(document.getElementById('chartId'))
      myChart.hideLoading()

      // 根据县动态生成
      let regions = []

      this.features.forEach(item => {
        regions.push({
          name: item.properties.name, // 板块名称
          itemStyle: {
            color: '' // 板块颜色
          }
        })
      })

      let self = this
      let option = {
        geo3D: {
          map: 'geoJson',
          roam: false, // 禁用地图的缩放和平移功能
          onMouseWheel: false,
          itemStyle: {},
          label: {
            show: true,
            position: 'inside',
            color: '#fff', //地图初始化区域字体颜色
            fontSize: 12,
            rich: {
              customDiv: {
                backgroundColor: 'rgba(50,50,50,0.7)',
                padding: [4, 5],
                width: 80,
                margin: 0,
                lineHeight: 20  // 如不需要高度间距用行高修正
              }
            },
            formatter: function (params) {
              return `${params.name}`
            },
            verticalAlign: 'middle', // 设置文字垂直居中对齐
            lineHeight: 16 // 调整文字的行距
          },
          regions: regions,
          viewControl: {
            autoRotate: false,
            autoRotateAfterStill: 2,
            distance: 105,
            //  beta: this.beta,   默认左右旋转角度
            // minAlpha: 45, 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
            //   maxAlpha: 350,上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            // minBeta: 310, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            // maxBeta: 160, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            animation: false,
            animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
            animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
          },

          emphasis: {
            disabled: false, //是否可以被选中
            label: {
              formatter: params => {
                clearInterval(self.mapTimer)
                // 自定义 tooltip 的内容
                return '{customDiv|' + `${params.name}\n百分比：0%\n百分比：0% ` + '}'

              },
              backgroundColor: 'rgba(50,50,50,0.7)' // tooltip 背景颜色
            },
            itemStyle: {
              color: 'orange' //显示移入的区块变粉色
            }
          },
          shading: 'lambert',
          light: {
            // 光照阴影
            // ambient: {
            //   intensity: 1
            // }
          }
        }
      }
      option.geo3D.regions.forEach((region, index) => {
        region.itemStyle.color = this.mapColors[index % 11]
        // 白色虚线
        region.itemStyle.borderColor = '#fff'
        // region.itemStyle.backgroundColor = '#fff'
        region.itemStyle.borderWidth = 1
      })


      myChart.setOption(option)
      this.isInit = true
      const autoHighlight = () => {
        self.cartoonIndex = (this.cartoonIndex + 1) % this.features.length
        // 获取所有地图数据
        // 使用setOption方法更新echarts配置
        myChart.setOption({
          geo3D: {
            label: {
              formatter: function (params) {
                let curIndex = regions.findIndex(item => {
                  return item.name === params.name
                })
                if (curIndex === self.cartoonIndex) {
                  return '{customDiv|' + `${params.name}\n完测率：0%\n达标率：0% ` + '}'
                } else {
                  return params.name
                }
              }
            }
          }
        })
      }
      // 开启定时器，每秒切换一次高亮
      clearInterval(this.mapTimer)
      this.mapTimer = setInterval(autoHighlight, 1000)
      document.querySelector('#chartId').addEventListener('mouseout', function (event) {
        // 在鼠标移出时执行的操作
        clearInterval(self.mapTimer)
        self.mapTimer = setInterval(autoHighlight, 1000)
      })
    }
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #2c3e50;
}
</style>